<template>
	<view class="picedit">
		<view class="left">
			<image :src="item.tempurl" mode="aspectFit"></image>
			<view class="mask">
				<view class="icon">
					<uni-icons type="compose" color="#fff" size="20" @click="editImg"></uni-icons>
				</view>
			</view>
		</view>
		<view class="right">

			<view class="row" v-if="showClassid">
				<view class="label">所属分类</view>
				<uni-data-select ref="selectRef" @change="classifyChange" collection="xxm-bizhi-classify"
					field="_id as value, name as text, sort" :where="`enable == true`" orderBy="sort asc" :clear="false"
					v-model="selectValue">

				</uni-data-select>
			</view>

			<view class="row">
				<view class="label">图片描述</view>
				<uni-easyinput type="textarea" @input="descChange" :value="item.description"
					placeholder="请输入图片描述"></uni-easyinput>
			</view>
			<view class="row">
				<view class="label">评分</view>
				<uni-rate :touchable="false" :size="30" :allow-half="true" :value="item.score" @change="scoreChange" />
			</view>
			<view class="row">
				<view class="label">标签</view>
				<uni-easyinput v-model="iptValue" @confirm="tabConfirm" type="text"
					placeholder="请输入标签名并回车确认"></uni-easyinput>
				<view class="tabGroup">
					<view @click="deleteTab(tIndex)" class="tab" v-for="(tab, tIndex) in item.tabs" :key="tab">
						{{tab}}
					</view>
				</view>
			</view>
			<view class="row inline">
				<view class="label">是否展示</view>
				<switch :checked="item.checked" @change="checkedChange" v-model="item.checked"
					style="transform: scale(0.6); transform-origin: left center;" />
			</view>
		</view>
	</view>

	<cropper-image ref="cropperRef" :tempurl="item.tempurl" @confirm="tempChange"></cropper-image>
</template>

<script setup>
	import { ref } from 'vue';

	const props = defineProps({
		item: Object,
		showClassid: {
			type: Boolean,
			default: false
		}
	});
	const iptValue = ref("");
	const selectValue = ref(props.item.classid);
	const emits = defineEmits(['update:item']);
	const cropperRef = ref(null);

	const editImg = () => {
		cropperRef.value.open();
		console.log(props.item);
	}

	//裁剪完毕图片
	const tempChange = (e) => {
		emits("update:item", { ...props.item, tempurl: e })
	}

	//分类选择
	const classifyChange = () => {
		emits("update:item", { ...props.item, classid: selectValue.value })
		console.log(selectValue.value);
	}

	//图片描述
	const descChange = (e) => {
		emits("update:item", { ...props.item, description: e })
	}

	//打分判断
	const scoreChange = (e) => {
		emits("update:item", { ...props.item, score: e.value.toString() })
	}

	//是否展现
	const checkedChange = (e) => {
		emits("update:item", { ...props.item, checked: e.detail.value })
	}

	//确认标签
	const tabConfirm = () => {
		emits("update:item", { ...props.item, tabs: [...props.item.tabs, iptValue.value] })
		iptValue.value = '';
	}

	//删除标签
	const deleteTab = (tIndex) => {
		let tabs = [...props.item.tabs];
		v
		tabs.splice(tIndex, 1);
		emits("update:item", { ...props.item, tabs: tabs })
	}
</script>


<style lang="scss" scoped>
	.picedit {
		display: flex;
		align-items: start;

		.left {
			// border: 1px solid red;
			width: 150px;
			aspect-ratio: 9 / 20;
			position: relative;
			background: conic-gradient(#ccc 0 25%, #fff 25% 50%, #ccc 50% 75%, #fff 75%);
			background-size: 10px 10px;

			image {
				width: 100%;
				height: 100%;
			}

			.mask {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 30px;
				background: rgba(0, 0, 0, 0.4);
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
				}
			}
		}

		.right {
			// border: 1px solid red;
			flex: 1;
			margin-left: 20px;
			color: #666;

			.row {
				margin-bottom: 20px;

				.label {
					font-size: 14px;
					margin-bottom: 6px;
				}

				.tabGroup {
					display: flex;
					margin-top: 6px;
					flex-wrap: wrap;
					gap: 6px;

					.tab {
						border: 1px solid #1A73E8;
						border-radius: 100px;
						color: #1A73E8;
						font-size: 12px;
						padding: 2px 6px;
						cursor: pointer;
						margin-right: 6px;
					}

					.tab:hover {
						text-decoration: line-through;
					}
				}

				&.inline {
					display: flex;
					align-items: center;
					gap: 10px;

					.label {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>